<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>化学方程式配平器</title>
    <meta name="description" content="智能化学方程式配平工具，支持复杂分子式自动配平">
    <meta name="keywords" content="化学方程式,配平,化学计算,分子式">
    
    <!-- 移动端适配 -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    
    <!-- 图标 -->
    <link rel="icon" href="/static/logo.png" type="image/png">
    <link rel="apple-touch-icon" href="/static/logo.png">
    
    <style>
        /* 预加载样式 */
        #app-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f8f9fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        
        .loading-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
            border-radius: 16px;
            background: #4CAF50;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 36px;
            font-weight: bold;
        }
        
        .loading-text {
            font-size: 18px;
            color: #666;
            margin-bottom: 30px;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 隐藏加载页面 */
        body.loaded #app-loading {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 加载页面 -->
    <div id="app-loading">
        <div class="loading-logo">⚗️</div>
        <div class="loading-text">化学方程式配平器</div>
        <div class="loading-spinner"></div>
    </div>
    
    <!-- 应用容器 -->
    <div id="app"></div>
    <script type="module" src="/main.ts"></script>
    
    <script>
        // 页面加载完成后隐藏加载动画
        window.addEventListener('load', function() {
            setTimeout(() => {
                document.body.classList.add('loaded');
            }, 500);
        });
    </script>
</body>
</html>